<template>
	<view class="GraphicIntroduction">
		<!-- <u-navbar>
			<view class="preservation" slot="right">保存</view>
		</u-navbar> -->
		<view class="GraphicIntroductionBox">
			<view class="GraphicItem">
				<view class="textareaBox">
					<textarea placeholder="请输入文字/插入图片，每段限200字，全篇限2000字" maxlength="200" :auto-height="true"
						v-model="startTxt" />
				</view>
				<view class="ImageBox" v-for="(item,index) in ImageUrl" :key="index" v-if="item">
					<image :src="getImage(item)" mode="widthFix"></image>
					<view style="height: 60upx;line-height: 60upx;text-align: right;color: red;" @click="delItem" :data-index="index">删除</view>
					<view class="textareaBox" style="margin-top: 32upx;">
						<textarea placeholder="请输入文字/插入图片，每段限200字，全篇限2000字" maxlength="200" :auto-height="true"
							v-model="textArr[index]" />
					</view>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<cover-view class="insertBox">
				<cover-view class="insertBtn" @click="chooseImage">插入图片</cover-view>
				<cover-view class="insertBtn" @click="submit">保存</cover-view>
			</cover-view>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<view class="insertBox">
				<view class="insertBtn" @click="chooseImage">插入图片</view>
				<view class="insertBtn" @click="submit">保存</view>
			</view>
			<!-- #endif -->
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				ImageUrl: [],
				textArr: [],
				startTxt: ""
			}
		},
		onLoad() {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			if (uni.getStorageSync("richData")) {
				let data = uni.getStorageSync("richData");
				this.startTxt = data.startTxt;
				for (let i = 0; i < data.richTxt.length; i++) {
					this.ImageUrl.push(data.richTxt[i].img);
					this.textArr.push(data.richTxt[i].txt);
				}
			}
		},
		methods: {
			delItem(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				this.ImageUrl.splice(index,1);
			},
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			submit() {
				let obj = {};
				let arr = [];
				obj.startTxt = this.startTxt;
				for (let i = 0; i < this.ImageUrl.length; i++) {
					let objs = {};
					objs.img = this.ImageUrl[i];
					objs.txt = this.textArr[i];
					arr.push(objs);
				}
				obj.richTxt = arr;
				let pages = getCurrentPages();
				pages[pages.length - 2].$vm.richData = obj;
				this.$refs.uToast.show({
					title: "已保存",
					type: "success",
					duration: 1500
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1500)
			},
			chooseImage() {
				let _this = this;
				uni.chooseImage({
				 count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(result) {
						// console.log(res.tempFilePaths);
						uni.showLoading({
							title:"上传图片中..."
						})
						let j = result.tempFilePaths.length;
						let arr = JSON.parse(JSON.stringify(_this.ImageUrl))
						let p = arr.length;
						for(let i=0;i<result.tempFilePaths.length;i++){
							_this.ImageUrl.push("");
							_this.textArr.push("");
						}
						for(let i=0;i<result.tempFilePaths.length;i++){
							app.$vm.updataAvator(result.tempFilePaths[i]).then(res=>{
								j--;
								_this.ImageUrl.splice((p+i),1,res)
								if(j==0){
									uni.hideLoading();
								}
							});
						}
						
					},
					fail:err=>{
						if(err.errMsg!='chooseImage:fail cancel'){
							app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
								if(resultConfirm){
									uni.showModal({
										title:"系统繁忙，请稍后再试"
									})
								}else{
									uni.showModal({
										title:"请检查摄像头和相册权限后重试"
									})
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.GraphicIntroduction {
		background-color: #F3F3F3;
		height: 100vh;
		// padding-top: 88upx;
		padding-bottom: 160upx;
		overflow: auto;

		.preservation {
			padding: 0 24upx;
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFAC3F;
		}

		.GraphicIntroductionBox {
			margin-top: 16upx;

			// background-color: #fff;
			// height: 100%;
			.GraphicItem {
				padding: 24upx;

				// height: calc(100vh - 252upx);
				// padding-bottom: 252upx;
				.textareaBox {
					textarea {
						width: 100%;
						font-size: 24upx;
						line-height: 40upx;
					}
				}

				.ImageBox {
					width: 702upx;
					// height: 468upx;
					opacity: 1;

					overflow: hidden;
					margin: 32upx 0;

					image {
						width: 100%;
						border-radius: 20upx;
					}
				}
			}

			.insertBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: fixed;
				bottom: 0;
				width: 750upx;
				height: 148upx;
				background: #FFFFFF;
				box-shadow: 0 -2upx 10upx rgba(0, 0, 0, 0.1);
				opacity: 1;
				padding: 24upx;
				z-index: 9999;
				box-sizing: border-box;

				.insertBtn {
					// #ifdef MP-WEIXIN
					width: 49%;
					// #endif
					// #ifdef APP-PLUS
					width: 49%;
					// #endif
					height: 100upx;
					background: #FFAC3F;
					opacity: 1;
					border-radius: 8upx;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					line-height: 100upx;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
